*{margin: 0;padding: 0;}
li {list-style: none;}
a {text-decoration: none;}

body {
    width: 100%;
    height: 100%;
    background: #f7f7f7;
    overflow: auto;
}

.box {
    display: -webkit-box;
    display: -moz-box;
}

.px2rem(@name,@px){
    @{name}:@px / 75 * 1rem;
}


.zi(@age1,@age2){
    .px2rem(font-size,@age1);
     color: @age2;
}

.p-top(@top){
    .px2rem(padding-top,@top)
 }
        
.p-right(@right){
    .px2rem(padding-right,@right);
 }
        
.p-bottom(@bottom){
    .px2rem(padding-bottom,@bottom);
 }
.p-left(@left){
    .px2rem(padding-left,@left);
}

 .m-top(@top){
    .px2rem(margin-top,@top);
  }
.m-right(@right){
    .px2rem(margin-right,@right);
 }
.m-bottom(@bottom){
    .px2rem(margin-bottom,@bottom);
 }
.m-left(@left){
    .px2rem(margin-left,@left);
}
.w(@width){
    .px2rem(width,@width);
}
.h(@height){
    .px2rem(height,@height);
}

.top (@top){.px2rem(top, @top);}
.left (@left){.px2rem(left, @left);}
.right (@right){.px2rem(right, @right);}
.bottom (@bottom){.px2rem(bottom, @bottom);}

.border-radius(@arg){.px2rem(border-radius, @arg);}
.border-radius(@arg){.px2rem(border-top-left-radius, @arg);}
.border-radius(@arg){.px2rem(border-bottom-left-radius, @arg);}

.webkit{
    display: flex;
    display: -webkit-flex;
}
.line-height(@arg){.px2rem(line-height, @arg);}
.font-size(@arg){.px2rem(font-size, @arg);}

.font(@fz,@color){
    .px2rem(font-size,@fz);
    color: @color;
}
.border-bottom(@px,@xian,@color){
    .px2rem(border-bottom-width,@px);
    border-bottom-style: @xian;
    border-bottom-color: @color;
}
.border-top(@px,@xian,@color){
    .px2rem(border-top-width,@px);
    border-top-style: @xian;
    border-top-color: @color;
}
.border-right(@px,@xian,@color){
    .px2rem(border-right-width,@px);
    border-right-style: @xian;
    border-right-color: @color;
}
.border-left(@px,@xian,@color){
    .px2rem(border-left-width,@px);
    border-left-style: @xian;
    border-left-color: @color;
}
.border(@px,@xian,@color){.px2rem(border-width,@px);border-style: @xian; border-color: @color;}

.padding-top(@top){.px2rem(padding-top, @top);}
.padding-right(@right){.px2rem(padding-right, @right);}
.padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
.padding-left(@left){.px2rem(padding-left, @left);}

.padding(@top,@right,@bottom,@left){
   .px2rem(padding-top,@top);
   .px2rem(padding-right,@right);
   .px2rem(padding-bottom,@bottom);
   .px2rem(padding-left,@left);
}

.margin-top(@top){.px2rem(margin-top, @top);}
.margin-right(@right){.px2rem(margin-right, @right);}
.margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
.margin-left(@left){.px2rem(margin-left, @left);}

.margin(@top,@right,@bottom,@left){
   .px2rem(margin-top,@top);
   .px2rem(margin-right,@right);
   .px2rem(margin-bottom,@bottom);
   .px2rem(margin-left,@left);
}

header{
    width: 100%;
    height: 10%;
    text-align: center;
    background: #8ec251;
    position: fixed;top:0;
    .ssk{
        width: 70%;
        .h(70);
        .px2rem(line-height,90);
        .m-left(5%);
        .m-top(10)
    }
    .logo{
        .h(80);
        float: left;
    }
}

section{
    background: #f2f2f2;
    position: fixed;.px2rem(top,90);
    width: 100%;
    overflow: auto;
    height: 85%;
    nav{
        width: 100%;
        img{
            width:100%;
        }
    }
    .rm{
        .m-top(10);
        width: 100%;
        .h(443);
        .nav{
            float: left;
           width:100%;
           background: white;
           .h(63);
           border-bottom:1px solid #dbdbdb;
           span{
               background: url(../../img/images/首页（改）-1_03.png) no-repeat left 0;
               float: left;
               .px2rem(font-size,26);
               color: #fd6502;
               .px2rem(background-size,42);
               .p-left(50);
               .m-left(20);
               .h(63);
               .m-top(20);
           }
           .gd{
               background: url(../../img/gengduo.png) no-repeat right 0;
               float: right;
               color: #999999;
               .px2rem(background-size,20);
               .p-right(50);
               .m-right(20);
               .h(63);
               .m-top(20);
           }
        }
        .left{
            float: left;
            width: 38%;
            float: left;
            .h(443);
            
            border-bottom:1px solid #dbdbdb;
            .cpxx{
                .m-left(10);
                float: left;
                li{
                    .m-top(13);
                }
                .cpm,{
                    .zi(30,black)
                }
                .xj{
                    .zi(30,red)
                }
                .yj{
                    text-decoration:line-through;
                    .zi(20,#aab2bd)
                }
            }
            span{
                float: right;
                width: 23%;
                margin-right:7% ;
                 img{
                   width: 120%;
                }
            }
            .jrgwc{
                width: 80%;
                .h(60);
                .zi(10,white);
                background: #ed2323;
                border: 0;
                border-radius: 5%;
                
            }
            div{
                width: 100%;
                img{width: 100%;}
            }
        }
        .right{
            border-left:1px solid #dbdbdb;
            
            float: right;
            background: white;
            .h(443);
            width: 61%;
            .shang{
                width: 100%;
                height: 50%;
                border-bottom:1px solid #dbdbdb;
                .cpxx{
                    width: 40%;
                    .m-left(10);
                    float: left;
                    li{
                        .m-top(13);
                    }
                    .cpm,{
                        .zi(30,black)
                    }
                    .xj{
                        .zi(30,red)
                    }
                    .yj{
                        text-decoration:line-through;
                        .zi(20,#aab2bd)
                    }
                    .wdgwc{
                        .w(50)
                    }
                }
                span{
                    float: right;
                    width: 50%;
                    img{
                        width:100%;
                    }
                }
            }
            .xia{
                width: 100%;
                height: 50%;
                .xl{
                    float: left;
                    width: 50%;
                    height: 100%;
                    .cpxx{
                        width: 40%;
                        float: left;
                        li{
                            .m-top(13);
                            display: inline-block;
                        }
                        .cpm,{
                            .zi(30,black);
                        }
                        .xj{
                            .zi(30,red);
                        }
                        .yj{
                            text-decoration:line-through;
                            .zi(20,#aab2bd);
                        }
                        .wdgwc{
                            .w(50);
                        }
                    }
                    span{
                        float: right;
                        .m-top(115);
                        img{
                            .h(100);
                        }
                    }
                }
                .xr{
                    float: right;
                    width: 50%;
                    height: 100%;
                    .cpxx{
                        width: 40%;
                        float: left;
                        li{
                            .m-top(13);
                            display: inline-block;
                        }
                        .cpm,{
                            .zi(30,black);
                        }
                        .xj{
                            .zi(30,red);
                        }
                        .yj{
                            text-decoration:line-through;
                            .zi(20,#aab2bd);
                        }
                        .wdgwc{
                            .w(50);
                        }
                    }
                    span{
                        float: right;
                        .m-top(115);
                        img{
                            .h(100);
                        }
                    }
                }
            }
        }
    }
    .xp{
        .m-top(80);
        width: 100%;
        .nav{
            float: left;
            width:100%;
            background: white;
            .h(63);
            border-bottom:1px solid #dbdbdb;
            span{
               background: url(../../img/images/xp_03.png) no-repeat left 0;
               float: left;
               .px2rem(font-size,26);
               color: #71c311;
               .px2rem(background-size,42);
               .p-left(50);
               .m-left(20);
               .h(63);
               .m-top(20);
            }
            .gd{
               background: url(../../img/gengduo.png) no-repeat right 0;
               float: right;
               color: #999999;
               .px2rem(background-size,20);
               .p-right(50);
               .m-right(20);
               .h(63);
               .m-top(20);
            }
        }
        .xm{
            width: 100%;
            float: left;
            .bj{
                width: 100%;
                .dy{
                    width: 100%;
                    .h(299);
                    li{
                        float: left;
                        width: 33%;
                        height: 100%;
                        border-right: 1px solid #dbdbdb;
                        border-bottom: 1px solid #dbdbdb;
                        background: white;
                        div{    
                            width: 100%;
                            height: 50%;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .cpxx{
                            float: left;
                            li{
                                border: 0;
                                clear: left;
                                
                            }
                             .cpm,{
                                .zi(30,black);
                                width: 100%;
                            }
                            .xj{
                                .zi(30,red)
                            }
                            .yj{
                                text-decoration:line-through;
                                .zi(20,#aab2bd)
                            }
                        }
                         .wdgwc{
                                float: right;
                                .w(50);
                                .m-top(30);
                            }
                    }
                }
            }
        }
    }
}
footer {
    .webkit();
    justify-content: space-between;
    .px2rem(height,100);
    text-align: center;
    background: #fff;
    .margin-top(15);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;   
    dl dt img {
       .px2rem(width,41);
        .px2rem(height,41); 
    }
    .left {
        .margin-left(53);
    }
    .right {
        .margin-right(54);
    }
    dl dt {
        .margin-bottom(10);
    }
    dl {
        .margin-top(15);
    }
}


